<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Echart_bar</title>
	<style>
		.echart_bar{
			width: 900px;
			height: 400px;
			border: 1px solid #000;
			margin:10px auto 0;
		}
	</style>
</head>
<body>
	<div>修改了work1，提交本地commit--然后push到远程</div>
	
	<p>worker1接着自己的开发，在提交push前pull工程，然后</p>
	
	<p>在worker2开发的同时，worker1也在做自己的开发，但是提交前也应保证是最新的文件，所以应先pull项目，然后再push</p>
	<!-- 为echart准备容器DOM -->
	<div id="echart" class='echart_bar'>
		
	</div>
	<script src='../js/echarts-all.js'></script>
	<script type='text/javascript'>

        options= {
          /* */ grid:{
                x2:10
            },
            title : {
                text: '画像小类调用情况'
            },
           /* legend:{
            	borderColor:'skyblue',
		        data:['画像1','画像2','画像3','画像4','画像5','画像6','画像7','画像8','画像9','画像10'],
		        x:'center',
		        y:'bottom'
            },*/
            tooltip : {
                trigger: 'axis'
            },
            toolbox: {
                show : true,
                feature : {
                }
            },
            axis:{
                 axisLabel:{
                        color:'skyblue'
                },
                axisLine:{
                    color: '#48b',
                    width: 2,
                    type: 'solid'
                }
            },
            calculable : true,

            xAxis : [
                {
                    type : 'value',  //切换显示方向，  x是value值  y是类别
                    data : [9,8,7,6,5,4,3,2,1,0]
                    // ,splitLine:{show: false}//显示网格
                   
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    data:['土豆土豆土豆土豆土豆土豆土豆','大豆','黄瓜','白菜白菜白菜白菜白菜','大米','苹果','香蕉','菠萝','橘子','西瓜']
                    ,splitLine:{show: false}  //显示网格
                   /* ,axisLine:{
                    	lineStyle:{
                    		color: 'blue',
							type: 'solid',
							width: 10,
							shadowColor: 'rgba(0,0,0,0)',
							shadowBlur: 5,
							shadowOffsetX: 3,
							shadowOffsetY: 3,
                    	}
                    }*/
                    ,axisLabel:{
                    	show:true,
                    	// show:false,
                    	interval:0,
                    	rotate:0,
                    	margin:8,
                    	clickable:false,
                    	formatter:null,
                    	textStyle:{
                    		color:'#000',
                    		align:'right',
                    		baseline:'bottom',//middle,bottom
                    		// fontFamily:
                    		fontSize:12,
                    		fontStyle:'normal',
                    		fontWeight:'normal'
                    	},formatter:function(params){
						    var newParamsName = "";// 最终拼接成的字符串
						    var paramsNameNumber = params.length<6?params.length:6;// 实际标签的个数
						    var provideNumber = 3;// 每行能显示的字的个数
						    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
						    /**
						     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
						     */
						    // 条件等同于rowNumber>1
						    if (paramsNameNumber > provideNumber) {
						        /** 循环每一行,p表示行 */
						        for (var p = 0; p < rowNumber; p++) {
						            var tempStr = "";// 表示每一次截取的字符串
						            var start = p * provideNumber;// 开始截取的位置
						            var end = start + provideNumber;// 结束截取的位置
						            // 此处特殊处理最后一行的索引值
						            if (p == rowNumber - 1) {
						                // 最后一次不换行
						                tempStr = params.substring(start, paramsNameNumber);
						            } else {
						                // 每一次拼接字符串并换行
						                tempStr = params.substring(start, end) + "\n";
						            }
						            newParamsName += tempStr;// 最终拼成的字符串
						        }

						    } else {
						        // 将旧标签的值赋给新标签
						        newParamsName = params;
						    }
						    //将最终的字符串返回
						    return newParamsName
						}
                    }
                }
            ],
            //柱状图 背景色
            color:['skyblue'],
            series:[{
                    name:'',
                    type:'bar', //显示的类型line bar 
                    data:[3,4,6,4,6,2,7,3,9,2],
                    itemStyle:{
                    	normal:{
                    		barBorderRadius:[50,50,50,50],
                    		label:{
                    			show:true,
                    			position:'right'
                    		}
                    	}
                    	,emphasis:{
                    		barBorderRadius:[50,50,50,50]
                    	}
                    }
                    ,barWidth:20

            }]
        }
		var myChart = echarts.init(document.getElementById('echart')).setOption(options);
	</script>
	<div class="" style='display:none'>
	abel.formatter类型
string, Function
默认值
null
内容格式器：{string}（Template） | {Function}，支持异步回调见表格下方
{string}，模板（Template），其变量为：
{a} | {a0}
{b} | {b0}
{c} | {c0}
{d} | {d0} （部分图表类型无此项）
{e} | {e0} （部分图表类型无此项）
多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...
其中变量a、b、c、d在不同图表类型下代表数据含义为：
折线（区域）图、柱状（条形）图、K线图 : a（系列名称），b（类目值），c（数值）, d（无）
散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）
地图 : a（系列名称），b（区域名称），c（合并数值）, d（无）
饼图、雷达图、仪表盘、漏斗图: a（系列名称），b（数据项名称），c（数值）, d（饼图：百分比 | 雷达图：指标名称）
力导向图, 和弦图 :
节点 : a（系列名称），b（节点名称），c（节点值）, d(节点类目索引)
边 : a（系列名称），b（边名称，默认为大端节点名称-小端节点名称），c（link.value）, d(大端节点 name 或者 index), e(小端节点 name 或者 index)
{Function}，传递参数列表为[params, ticket, callback]，详见下：
params : 数组内容同模板变量，
[
    {

        seriesIndex: 0,
        seriesName: '一周销量',
        name: '周一',
        dataIndex: 0,
        data: data,
        name: name,
        value: value,
        percent: special,       // 饼图
        indicator: special,     // 雷达图、力导向、和弦
        value2: special2,       // 力导向、和弦
        indicator2: special2    // 力导向、和弦
    },
    {..},
    ...
]
ticket : 异步回调标识
callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html
*函数回调时this指针指向当前图表实例（myChart）

标签文本格式器，通用，同Tooltip.formatter，支持模板、方法回调，不支持异步回调
</div>
</body>
</html>